<template>
	<mescroll-uni :fixed="false" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
		@emptyclick="emptyClick" @init="mescrollInit">
		<view class='o-order-list'>
			<view class='o-order-item' v-for="(item,index) in list" :key="index" v-if="list.length > 0">
				<view class="o-item-header" @click="orderinfo(item.order_id)">
					<image :src="item.shop.logo" class="shop-logo" @error="errorLogo(index)" mode="aspectFit"></image>
					<view class="shop-info ">
						<view>
							<text class="title">{{item.shop.shop_name}}</text>
							<text v-if="item.is_reserve==1 && item.orderType==0" class="self-tag">（预定）</text>
							<text v-if="item.take_self==1" class="self-tag">（自取）</text>
							<text v-if="item.orderType==1" class="self-tag">（快递代取）</text>
							<text class="right-ico cuIcon-right"></text>
						</view>
						<view><text class="addtime">{{item.created_at}}</text></view>
					</view>


					<view class="status">
						<text v-if="item.order_status == 0 && item.pay_status == 0" class="red-color">待支付</text>
						<text v-if="item.order_status == 0 && item.pay_status == 1" class="blue-color">待商家确认</text>
						<text v-else-if="item.order_status == 1 && item.logistica_sn==0 " class="blue-color">
							正在备货中</text>
						<text v-else-if="item.order_status == 1 && item.logistica_sn!=0 "
							class="blue-color">已发货,运输中</text>
						<text v-else-if="item.order_status == 3 " style="color: #999999;">已取消</text>
						<text v-else-if="item.order_status == 4 ">已完成</text>
						<text v-else-if="item.order_status == 5 ">商家拒绝</text>
						<text v-else-if="item.order_status == 6 ">退款处理中</text>

						<!-- 	<text class="peisong addtime " v-if="item.is_downstairs==1"> 送到楼下</text>
					 -->
					</view>
				</view>

				<view class="o-item-content" v-for="(goods,gkey) in item.order_goods" :key="gkey"
					@click="orderinfo(item.order_id)">
					<image :src="goods.goods[0].goods_thumbs[0]" class="goodImg" @error="errorimg1(index,gkey)"
						mode="aspectFill"></image>

					<view class="goods-name">
						<view><text>{{goods.goods_name}}</text></view>
						<view class="spec-key"><text>{{goods.spec_item_name}}</text></view>
					</view>
					<view class="goods-price">
						<text>￥{{goods.goods_total_price}}</text>
						<view class="num">共{{goods.goods_num}}件</view>
					</view>
				</view>
				<view class="o-item-footer">
					<text class="cu-btn1   line-gray1" v-if="item.order_status==0"
						@click="cancelOrder(item.order_id)">取消订单</text>
					<text class="cu-btn1   line-blue " v-if="item.order_status==0 && item.pay_status==0"
						@click="pay(item.order_id)">立即支付</text>
					<text class="cu-btn1   line-gray1" v-if="item.order_status==2"
						@click="confirmOrder(item.order_id)">确认收货</text>
					<text class="cu-btn1   line-gray1" v-if="item.order_status==4  && item.is_comment==0"
						@click="comment(item.order_id)">发表评价</text>
					<text class="cu-btn1   line-gray1" @click="buyagain(index)">再来一单</text>
					<text class="cu-btn1   line-gray1" v-if="item.order_status==4 && item.is_after_sale==0"
						@click="aftersale(item.order_id)">申请售后</text>
						<text class="cu-btn1   line-gray1" v-if="item.order_status==4 && item.is_after_sale==1"
							@click="orderinfo(item.order_id)">查看售后</text>
						<text v-if="item.logistica_sn!=0 && item.order_status==1" class="cu-btn1 line-gray1 blue-color" @click="viewLogistics(item.order_id)">查看物流</text>
				</view>
			</view>

		</view>

	</mescroll-uni>
</template>
<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				domain: this.resDomain,
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false, // 不自动加载
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20 // 每页数据的数量
					},
					noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 空空如也 ~', // 提示
					},
					textNoMore: '-- 没有更多了 --'
				},
				order_status: ['all', 'pay', 'delivery', 'complete', 'cancel', 'aftersale'],
				list: [],
				isInit: false, // 列表是否已经初始化
				scrollY: 0,
				cartInfo: {},
				cartList: {},
				cartGoodsNum: {},
				goodsList: {},
				preList: [],
				api: {
					Deliver: "/buyer/DeliverOrderList",
					BotWater: "/buyer/BotWaterOrderList",
					TakeOut: "/buyer/orderList"
				},
				shop_id: -1,
			}
		},
		props: {
			i: Number, // 每个tab页的专属下标
			index: { // 当前tab的下标
				type: Number,
				default () {
					return 0
				}
			},
			searchVal: {
				type: String,
				default: ""
			},
			searchTime: Number,
			orderType: { //订单类型
				type: String,
				default: "TakeOut"
			},
			shopId: {
				type: Number,
				default: null
			}
		},
		watch: {
			index(val) {
				if (this.i === val) {
					this.isInit = true; // 标记为true
					this.mescroll.triggerDownScroll();
				}
			},
			searchVal(val) {
				this.pipei(val);
			},
			searchTime(val) {
				this.pipei(this.searchVal);
			},
			shopId(val) {
				this.shopId = val;
				this.shop_id = val;

			}

		},
		mounted() {



			if (this.i === 0) {
				this.isInit = true; // 标记为true
				this.mescroll.triggerDownScroll();
			}




		},
		methods: {

			//获取本地购物车
			confirmOrder(order_id) {
				this.apiRequest('/buyer/OrderConfirm', {
					order_id: order_id
				}).then(res => {
					if (res.code == 200) {
						this.mescroll.triggerDownScroll();
					}
					uni.showToast({
						title: res.msg
					})
				})
			},
			load() {
				this.isInit = true; // 标记为true
				this.mescroll.triggerDownScroll();
			},
			errorimg1(index, index1) { //图片加载失败给出默认图
				this.list[index].order_goods[index1].goods[0].goods_thumbs[0] = this.domain + "/static/img/error.png";
				this.$set(this.list, index, this.list[index]);
			},
			errorLogo(index) {
				this.list[index].shop.logo = this.domain + "/static/img/error.png";
				this.$set(this.list, index, this.list[index]);
			},
			//搜索匹配
			pipei(data) {
				let arr = [];
				arr = this.preList.filter((item) => {
					let k = false,
						val;
					val = new String(item.mobile);
					let array = {
						index: ['address', 'mobile', 'order_id', 'order_sn'],
						shop: ["address", "delivery_label", "loaction_addr0", "mobile", "shop_name", "tags"],
						order_goods: ["goods_name"]
					};
					for (let i in array.index) {
						let key = array.index[i];
						val = new String(item[key]);
						if (val.includes(data)) {
							k = true;
							break;
						}
					}
					if (!k) {
						for (let i in array.shop) {
							let key = array.shop[i];
							val = new String(item.shop[key]);
							if (val.includes(data)) {
								k = true;
								break;
							}
						}
					}
					if (!k) {
						for (let i in array.order_goods) {
							let key = array.order_goods[i];
							let arr = item.order_goods;
							for (let l in arr) {
								val = arr[l][key];
								if (val.includes(data)) {
									k = true;
									break;
								}
							}
							if (k) {
								break;
							}

						}
					}
					return k;
				})
				this.list = arr;

			},
			aftersale(order_id) {
				uni.navigateTo({
					url: '/app/ShopCenter/pages/afterSale?order_id=' + order_id
				});
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				let api = "/buyer/OnlineOrderList";
				this.apiRequest(api, {
					area_id: uni.getStorageSync('area_id'),
					order_status: this.order_status[this.i],
					page: mescroll.num,
					limit: mescroll.size,
					orderType: 1,
				}, 0).then(res => {
					if (res.code == 200) {
						if (mescroll.num == 1) {
							this.list = []
						}
						this.list = this.list.concat(res.data.data) //追加新数据
						this.preList = this.list;
						mescroll.endByPage(this.list.length, res.data.totalPage);
					} else {
						mescroll.endSuccess();
						mescroll.endByPage(this.list.length, 0);
					}
				})
				mescroll.endSuccess()
			},
			//点击空布局按钮的回调
			emptyClick() {

			},
			orderinfo(id) {
				console.log("orderinfo")
				uni.navigateTo({
					url: '/app/ShopCenter/pages/orderInfo?order_id=' + id
				});
			},
			cancelOrder(order_id) {
				this.apiRequest('/buyer/cancelOrder', {
					order_id: order_id
				}).then(res => {
					if (res.code == 200) {
						this.mescroll.triggerDownScroll();
					}
					uni.showToast({
						title: res.msg
					})
				})
			},
			seesale(order_id){
				
				
			},
		
			comment(order_id) {
				uni.navigateTo({
					url: '/app/TakeOut/pages/user/commentOrder?order_id=' + order_id + "&type=shopCenter"
				});

			},
			pay(order_id) {
				uni.navigateTo({
					url: '/app/ShopCenter/pages/pay?order_id=' + order_id
				});
			},
			/**
			 * @param {Object} index
			 */

			buyagain(index) {
				this.goodsList = this.list[index].order_goods;
				this.cartGoodsNum = {}
				if (this.list[index].order_goods.length > 0) {
					for (var key in this.list[index].order_goods) {
						if (this.cartGoodsNum[this.goodsList[key].goods_id] > 0) {
							this.cartGoodsNum[this.goodsList[key].goods_id] += this.goodsList[key].goods_num
						} else {
							this.$set(this.cartGoodsNum, this.goodsList[key].goods_id, this.goodsList[key].goods_num)
						}
						var cart = {}
						this.$set(cart, 'goods_id', this.goodsList[key].goods_id)
						this.$set(cart, 'num', this.goodsList[key].goods_num)
						this.$set(cart, 'item', this.goodsList[key].spec_item_key)
						this.$set(this.cartList, key, cart)
					}

				}

				this.apiRequest('/buyer/addCart', {
					cartList: this.cartList,
					shop_id: this.list[index].shop_id
				}).then(res => {
					if (res.code != 200) {
						uni.showToast({
							title: res.msg
						})
						return
					}
					this.cartInfo = res.data
					uni.setStorageSync('cartInfo-' + this.list[index].shop_id + "-" + index, this.cartInfo)
					uni.setStorageSync('cartList-' + this.list[index].shop_id + "-" + index, this.cartList)
					uni.setStorageSync('cartGoodsNum-' + this.list[index].shop_id + "-" + index, this
					.cartGoodsNum);
					uni.navigateTo({
						url: '/app/ShopCenter/pages/orderSub?shop_id=' + this.shop_id +
							"&good_id=-" + index
					});


				})
			},
			//查看物流
			viewLogistics(order_id){
				
				uni.navigateTo({
					url:"./viewLogistics?order_id="+order_id
				})
				
			}
		}
	}
</script>

<style scoped>
	/* orderList*/
	.o-order-list {
		width: 100%;
		margin-top: 20rpx;
	}

	.o-order-item {
		width: 94%;
		margin: 0 auto 20rpx auto;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		position: relative;
		padding: 4%;
	}

	.o-order-item view {
		background-color: #FFFFFF;
	}

	.no-Order {
		width: 90%;
		height: 200rpx;
		margin: auto;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		box-shadow: 0 0 5rpx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10rpx;
	}


	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24rpx;
		background-color: #1270e0;
		z-index: 99;
	}

	.o-item-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		/* justify-content: space-between; */
	}

	.o-item-header view {
		line-height: 1.2;
	}

	.shop-logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}

	.shop-info {
		font-size: 24rpx;
		margin-left: 15rpx;
		width: 60%;
	}

	.shop-info .title {
		color: #000000;
		font-weight: bold;
	}

	.shop-info .addtime {
		font-size: 20rpx;
		color: #666666;
	}

	.horseInfo .deliveryMer {
		margin-left: 15rpx;
		color: #FF5053;
	}

	.shop-info .self-tag {
		font-weight: bold;
		font-size: 20rpx;
		color: #FF3333;
	}

	.o-item-header .status {
		margin-left: auto;
		color: #333333;
		font-size: 24rpx;
		font-weight: bold;
	}

	.o-item-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.o-item-content .goodImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 15rpx;
	}

	.o-item-content .goods-name {
		font-size: calc(100vw*(24/750));
		margin-left: 15rpx;
		width: 60%;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 36rpx;
	}
	.o-item-content .goods-name view text{
		font-size: calc(100vw*(24/750));
		font-family: Georgia;
	}

	.o-item-content .goods-name .spec-key {
		font-size: 20rpx;
	}

	.o-item-content .goods-price {
		width: 20%;
		text-align: right;
	}

	.o-item-content .goods-price .num {
		color: #666666;
		font-size: 20rpx;
	}

	.o-item-footer {
		text-align: right;
		margin-top: 20rpx;
	}

	.o-item-footer .order-btn {
		padding: 2rpx 10rpx;
		border: 1px solid #666666;
		border-radius: 10rpx;
		margin-left: 15rpx;
		font-size: 28rpx;

	}

	.o-item-footer .order-btn-blue {
		padding: 2rpx 10rpx;
		border: 1px solid #1270e0;
		border-radius: 10rpx;
		margin-left: 15rpx;
		font-size: 28rpx;
		color: #1270E0;
	}

	.right-ico {
		font-size: 20rpx;
		color: #999999;
		margin-left: 15upx;
	}


	.search-box {
		width: 100vw;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		justify-content: flex-start;

	}

	.input-search-box {
		background: #F7F7F7;
		border-radius: 20upx;
	}

	.inputSearch1 {
		width: 80%;
		height: 100%;
		padding-left: 5%;
		background-color: #FFF7F7F7;
		border-radius: 20upx;

	}

	.top-warp {
		z-index: 9990;
		position: relative;
		left: 0;
		width: 100%;
		text-align: center;
		white-space: nowrap;
	}

	.top-warp view {
		display: inline-block;
		width: 20%;
		line-height: 100rpx;
		height: 100rpx;
		font-size: 28rpx;
		color: #333333;
		background-color: #FFFFFF;
	}

	.top-warp .active {
		border-bottom: 6rpx solid #000000;
		color: #000000;
		font-weight: bold;
	}

	.status {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		text-align: right;
	}

	.peisong {
		font-size: 20rpx;
		font-weight: normal;
		color: #666666;
		padding-top: 5upx;
	}

	.line-blue {
		margin-right: 20upx;
		border: 1px solid;
	}

	.cu-btn1 {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 15upx 15upx;
		font-size: 24upx;
		height: 60upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		transform: translate(0upx, 0upx);
		height: min-content;
		border-radius: 12upx;
	}

	.line-gray1 {

		margin-right: 20upx;
	}
</style>
